<template>
  <div class="column fit">
    <q-bar dense style="background-color: transparent">
      <q-space />
      <!-- <q-btn text-color="sub" dense flat icon="minimize" @click="emit('minimize')" /> -->
      <!-- <q-btn text-color="sub" dense flat icon="mdi-arrow-expand" @click="emit('maximize')" /> -->
      <q-btn
        text-color="sub"
        dense
        flat
        icon="close"
        @click="emit('close')"
        v-close-popup
      />
    </q-bar>
    <div
      class="col column fit justify-center items-center"
      @drop="onFileDrop"
      @dragenter="onDragEnter"
      @dragover="onDragOver"
    >
      <q-file
        ref="filePicker"
        style="display: none"
        v-model="file"
        accept=".mp4, .m4v, .mov"
      />
      <q-btn
        class="non-selectable"
        icon="mdi-upload"
        :ripple="false"
        flat
        padding="sm"
        round
        size="3rem"
        @click="pickFile"
      ></q-btn>
      <div class="q-my-md hint-string non-selectable">
        Drag and drop video file to upload
      </div>
      <q-btn label="Select File" rounded color="accent" @click="pickFile" />
    </div>
    <q-separator />
    <div
      class="footer row justify-center items-center text-center non-selectable q-my-sm"
    >
      <p>
        By submitting your videos or audio to Picalog, you acknowledge that you
        agree to Picalog's Terms of Service and Community Guidelines.
      </p>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, watch } from 'vue';
import { QFile, useQuasar } from 'quasar';
export default defineComponent({
  props: {
    isMaximized: {
      type: Boolean,
      default: false,
    },
    isFullscreen: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['minimize', 'maximize', 'close', 'next'],
  setup(props, { emit }) {
    const $q = useQuasar();
    const file: Ref<File | null> = ref(null);
    const filePicker = ref<InstanceType<typeof QFile>>();
    const onFileDrop = (event: DragEvent) => {
      event.stopPropagation();
      event.preventDefault();
      if (event.dataTransfer) {
        if (event.dataTransfer.files.length > 0) {
          const file = event.dataTransfer.files[0];
          if (file.type.includes('video')) {
            emit('next', file);
          } else {
            $q.dialog({
              title: 'Error',
              message: 'Please Drop Some Video File',
            });
          }
        }
      }
    };
    watch(file, () => {
      if (file.value) {
        if (file.value.type.includes('video')) {
          emit('next', file.value);
        } else {
          $q.dialog({
            title: 'Error',
            message: 'Please Drop Some Video File',
          });
        }
      }
    });
    return {
      file,
      filePicker,
      emit,
      onFileDrop,
      onDragOver(event: DragEvent) {
        event.preventDefault();
      },
      onDragEnter(event: DragEvent) {
        event.preventDefault();
      },
      pickFile() {
        if (filePicker.value) {
          filePicker.value.$el.click();
        }
      },
    };
  },
});
</script>
<style lang="sass" scoped>

.hint-string
  font-size: 14px
.footer
  font-size: 10px
  color: $sub
  p
    width: 70%
    margin: 0
</style>
